<template>
	<u-grid :border="false" col="2" style="padding-bottom: 100rpx;">
		<u-grid-item v-for="goods in goods.length > 0?goods:6">
		<navigator  url='xxx' class="goods-item thumb-box u-padding-bottom-40 u-padding-top-40" @click="openDetail(goods.id)">
			<u-skeleton :loading="loading" :animate="true">
				<u-image width="100%" height="300rpx" :src="goods.cover_url"></u-image>
				<view style="font-size: 12px;">{{goods.title}}</view>
				<view style="font-size: 14px;justify-content: space-between;" >
					<text class="price">$ {{goods.price}} </text>
					<text style="float: right;">库存: {{goods.stock||0}}</text>
				</view>
			</u-skeleton>
		</navigator>
		</u-grid-item>
	</u-grid>
</template>

<script>
	export default {
		name:"goods-cart",
		props:['goods','loading'],
		data() {
			return {
				
			};
		},
		methods:{
			openDetail(id){
				this.$u.route({
					url:'pages/goods/detail?id='+id
				})
			}
		}
	}
</script>

<style scoped>
	.goods-item {
		padding: 40rpx;
		box-shadow: 0 12rpx 20rpx 0 rgba(0, 0, 0, 0.1);
		justify-content: space-between;

		.goods-title {
			font-weight: 800;
			font-size: 18rpx;
			text-align: center;
		}
	}

	.u-flex {
		display: flex;
		font-size: 14rpx;
		justify-content: space-between;
	}

	.price {
		color: #00925f;
	}
</style>
